<template>
  <div class="panel-data-common">
    <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" />
    <div v-loading="isLoading" v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()">
      <slot name="dataPicker">
        <!-- 1.数据源类型 -->
        <VsFormItem :label="$demoi18n('panel.label.dataSourceType')" prop="dataSourceType">
          <el-select
            v-model="form.dataSourceType"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            :placeholder="$demoi18n('view.select.placeholder')"
            size="default"
            @change="dataSourceTypeChange"
            @focus="setMaxWidth"
          >
            <el-option
              v-for="item in dataSourceTypeShowOptions"
              :key="item.value"
              class="panel-data-select-option"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
              :style="selectStyle"
            ></el-option>
          </el-select>
        </VsFormItem>

        <!-- 2.选择数据源 (xMiner) -->
        <VsFormItem v-if="isXMiner" :label="$demoi18n('panel.label.selectDataSource')" prop="dataSource">
          <el-select
            v-model="form.dataSource"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            filterable
            :placeholder="$demoi18n('view.select.placeholder')"
            size="default"
            @visible-change="setTagTitle($event)"
            @change="dataSourceChange"
            @focus="setMaxWidth"
          >
            <el-option
              v-for="item in dataSourceList"
              :key="item.id"
              class="panel-data-select-option"
              :label="item.option_label"
              :value="item.option_value"
              :style="selectStyle"
            ></el-option>
          </el-select>
        </VsFormItem>
        <div
          v-if="isXMiner && form.dataSource && form.dataSourceType !== 'xMinerRedisRealTime'"
          :class="`sourceTip ${xvueTheme}`"
        >
          <span @click="go2xMiner(addDataSource)">{{ $demoi18n('message.addDataSource') }}</span>
        </div>

        <!-- 3.选择API (xMiner) -->
        <VsFormItem v-if="isXMiner" :label="$demoi18n('panel.label.selectApi')" prop="apiCode">
          <XMinerApiList
            v-model:value="form.apiCode"
            :api-list="apiList"
            @change="apiListChange"
            @visible-change="setTagTitle($event)"
          />
        </VsFormItem>
        <div v-if="isXMiner && form.apiCode" :class="`sourceTip ${xvueTheme}`">
          <span @click="go2xMiner(addApi)">{{ $demoi18n('message.addApi') }}</span>
        </div>

        <!-- 2.选择数据源 (公共数据库) -->
        <VsFormItem
          v-if="form.dataSourceType === xMinerPublicDatabase"
          :label="$demoi18n('panel.label.selectDataSource')"
          prop="dataSource"
        >
          <el-select
            v-model="form.dataSource"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            filterable
            :placeholder="$demoi18n('view.select.placeholder')"
            size="default"
            @visible-change="setTagTitle($event)"
            @change="dataSourceChange"
            @focus="setMaxWidth"
          >
            <el-option
              v-for="item in dataSourceList"
              :key="item.id"
              class="panel-data-select-option"
              :label="item.option_label"
              :value="item.option_value"
              :style="selectStyle"
            ></el-option>
          </el-select>
        </VsFormItem>
        <div v-if="form.dataSourceType === xMinerPublicDatabase && form.dataSource" :class="`sourceTip ${xvueTheme}`">
          <span @click="go2xMiner(viewDataSource)">{{ $demoi18n('message.viewDataSource') }}</span>
        </div>

        <!-- 3.选择API (公共数据库) -->
        <VsFormItem
          v-if="form.dataSourceType === xMinerPublicDatabase"
          :label="$demoi18n('panel.label.selectApi')"
          prop="apiCode"
        >
          <XMinerApiList
            v-model:value="form.apiCode"
            :api-list="apiList"
            @change="apiListChange"
            @visible-change="setTagTitle($event)"
          />
        </VsFormItem>
        <div v-if="form.dataSourceType === xMinerPublicDatabase && form.apiCode" :class="`sourceTip ${xvueTheme}`">
          <span @click="go2xMiner(viewApi)">{{ $demoi18n('message.viewApi') }}</span>
        </div>

        <!-- 2.数据包 (xTag) -->
        <VsFormItem
          v-if="form.dataSourceType === 'xTag'"
          :label="$demoi18n('panelData.label.xtagDataPackage')"
          prop="dataPackage"
        >
          <el-select
            v-model="form.dataPackage"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            filterable
            :placeholder="$demoi18n('view.select.placeholder')"
            size="default"
            @visible-change="setTagTitle($event)"
            @focus="setMaxWidth"
            @change="dataPackageChange"
          >
            <el-option
              v-for="item in dataSourceList"
              :key="item.id"
              class="panel-data-select-option"
              :label="item.option_label"
              :value="item.option_value"
              :style="selectStyle"
            ></el-option>
          </el-select>
        </VsFormItem>

        <!-- 3.数据表 （xTag） -->
        <VsFormItem
          v-if="form.dataSourceType === 'xTag'"
          :label="$demoi18n('panelData.label.xtagDataTable')"
          prop="dataTable"
        >
          <el-select
            v-model="form.dataTable"
            class="xtag-dataTable-select"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            filterable
            clearable
            :placeholder="$demoi18n('view.select.placeholder')"
            size="default"
            @visible-change="setTagTitle($event)"
            @focus="setMaxWidth"
            @change="dataTableChange"
          >
            <el-option
              v-for="item in apiList"
              :key="item.id"
              class="panel-data-select-option"
              :label="item.option_label"
              :value="item.option_value"
              :style="selectStyle"
            ></el-option>
          </el-select>
          <el-button v-if="form.dataTable" class="btn-preview" size="small" @click="showPreview">
            {{ $demoi18n('panelData.btn.preview') }}
          </el-button>
        </VsFormItem>

        <!-- 2.选择数据源 (fabric) -->
        <VsFormItem
          v-if="form.dataSourceType === 'fabric'"
          :label="$demoi18n('panel.label.selectDataSource')"
          prop="dataSource"
        >
          <el-select
            v-model="form.dataSource"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            filterable
            :placeholder="$demoi18n('view.select.placeholder')"
            size="default"
            @visible-change="setTagTitle($event)"
            @change="dataSourceChange"
            @focus="setMaxWidth"
          >
            <el-option
              v-for="item in dataSourceList"
              :key="item.id"
              class="panel-data-select-option"
              :label="item.option_label"
              :value="item.option_value"
              :style="selectStyle"
            ></el-option>
          </el-select>
        </VsFormItem>

        <!-- 3.选择API (fabric) -->
        <VsFormItem v-if="form.dataSourceType === 'fabric'" :label="$demoi18n('panel.label.selectApi')" prop="apiCode">
          <FabricApiList
            v-model:value="form.apiCode"
            :api-list="apiList"
            @change="apiListChange"
            @visible-change="setTagTitle($event)"
          />
        </VsFormItem>

        <!-- 主键字段值 -->
        <VsFormItem v-if="form.dataSourceType === 'kafka'" :label="$demoi18n('panel.label.fafkaKey')" prop="kafkaTopic">
          <el-input v-model="form.kafkaTopic" style="width:200px"></el-input>
        </VsFormItem>
      </slot>

      <!-- 自动刷新设置 -->
      <AutoRefreshSetting :form="form" :config="config" />
      <VsFormItem
        v-if="isShowSaveHitorySwitch && isRealTime"
        :label="$demoi18n('panel-data-common.isSaveHistoricalData')"
        :title="$demoi18n('panel-data-common.isSaveHistoricalData')"
      >
        <Helptip>{{ $demoi18n('panel-data.yieyaRealtimeSwitchTip') }}</Helptip>
        <el-switch v-model="form.isSavedHistoryRecord"></el-switch>
      </VsFormItem>

      <UpdateKeysCard
        v-if="isShowUpdateKeys && isRealTime"
        :config="config"
        :originConfig="{}"
        :widgetInstanceId="widgetInstanceId"
        :dataForm="form"
      />
      <SortKeysCard
        v-if="isShowUpdateKeys && isRealTime"
        :config="config"
        :originConfig="{}"
        :widgetInstanceId="widgetInstanceId"
        :dataForm="form"
      />

      <!-- 实时数据参数设置 -->
      <RealTimeParamCard
        v-if="isRealTime"
        :config="config"
        :originConfig="{}"
        :widgetInstanceId="widgetInstanceId"
        :dataForm="form"
      />

      <!-- 切换数据映射表格 -->
      <slot name="switchDataMapping">
        <div
          v-if="showSwitchDataMapping"
          class="switchDataMapping"
          :style="{ paddingBottom: form.dataMappingType === 'longitudinalData' ? '10px' : '0px' }"
        >
          <el-radio-group v-model="form.dataMappingType" size="small" @change="dataMappingTypeChanged">
            <el-radio-button label="longitudinalData"> {{ $demoi18n('panelData.label.longitudinalData') }}</el-radio-button>
            <el-radio-button label="horizontalData">{{ $demoi18n('panelData.label.horizontalData') }}</el-radio-button>
          </el-radio-group>
        </div>
      </slot>

      <slot name="switchDataMapping_after"></slot>

      <!-- xVue页面api数据源设置 -->
      <div v-if="form.dataSourceType === 'xVueApi'" class="xVueApiData">
        <VsFormItem :form="form" path="dataVal" :confs="fItemConf" placeholder="{{api1.data}}" />
      </div>

      <!-- 字段映射设置 -->
      <slot v-bind="{ commonComp }" name="dataMapping">
        <el-table
          v-show="!hideDataMapping"
          :data="form.tableData"
          style="width: 100%"
          size="small"
          class="mapping-table"
          :tooltip-effect="xvueTheme"
        >
          <el-table-column
            prop="field"
            :label="$demoi18n('panelData.mapping.field')"
            width="51"
            :show-overflow-tooltip="true"
            :show-tooltip-when-overflow="true"
          >
            <template #default="scope">
              <span v-if="rankTextTip && scope.row.field === 't'" :title="scope.row.field">
                {{ scope.row.field }}
                <Helptip>{{ $demoi18n('message.rankDataText') }}</Helptip>
              </span>
              <span v-else :title="scope.row.field">{{ scope.row.field }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="
              showNegativeMapping
                ? $demoi18n('panelData.mapping.mapping') + ' (' + $demoi18n('message.ringIndicatorErrorTip') + ')'
                : $demoi18n('panelData.mapping.mapping')
            "
            min-width="70"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <span v-if="!scope.row.skipVerification" class="mapping-scope">
                *
              </span>
              <VsFormItem
                :prop="`tableData[${scope.$index}].mapping`"
                :rules="
                  generateExceptionRules({
                    required: !scope.row.skipVerification,
                    label: $demoi18n(scope.row.explain),
                  })
                "
              >
                <!-- xTag 下拉项 -->
                <el-select
                  v-if="form.dataSourceType === 'xTag'"
                  v-model="scope.row.mapping"
                  :class="'panel-data-select-' + xvueTheme"
                  :popper-class="'select-poper-' + xvueTheme"
                  filterable
                  clearable
                  :placeholder="$demoi18n('view.select.placeholder')"
                  size="default"
                  @focus="setXtagMaxWidth"
                  @visible-change="setTagTitle($event)"
                  @change="xTagTableDataChange(scope.row)"
                >
                  <el-option
                    v-for="(item, index) in mappingOptionsXTag"
                    :key="item.id"
                    class="panel-data-select-option"
                    :label="item.option_label"
                    :value="item.option_label"
                    :style="selectxTagStyle"
                  >
                    <div v-if="item.type && item.type === 'add'" @click.stop="optionxTagClick(item, scope.row)">
                      <span class="select-option-slot-icon">
                        <el-button :link="true" type="primary" class="select-icon">
                          <el-icon><Plus /></el-icon>
                        </el-button>
                      </span>
                      <span class="select-option-slot-text" :style="{ width: `${xTagTextWidth}px` }">
                        &nbsp;{{ item.option_label }}
                      </span>
                    </div>
                    <div v-else-if="item.type && item.type === 'edit'">
                      <span class="select-option-slot-icon select-option-slot-icon-edit">
                        <el-button
                          :link="true"
                          type="primary"
                          class="select-icon"
                          :title="$demoi18n('btn.edit')"
                          @click.stop="optionxTagClick(item, scope.row)"
                        >
                          <el-icon><EditPen /></el-icon>
                        </el-button>
                        <el-button
                          :link="true"
                          type="primary"
                          class="select-icon"
                          :title="$demoi18n('btn.delete')"
                          @click.stop="optionxTagDelete(index)"
                        >
                          <el-icon><Delete /></el-icon>
                        </el-button>
                      </span>
                      <span class="select-option-slot-text" :style="{ width: `${xTagTextWidth}px` }">
                        {{ item.option_label }}
                      </span>
                    </div>
                    <div v-else>
                      <span>{{ item.option_label }}</span>
                    </div>
                  </el-option>
                </el-select>

                <!-- xMiner 下拉项 -->
                <el-select
                  v-else
                  v-model="scope.row.mapping"
                  :class="'panel-data-select-' + xvueTheme"
                  :popper-class="'select-poper-' + xvueTheme"
                  filterable
                  clearable
                  :placeholder="$demoi18n('view.select.placeholder')"
                  size="default"
                  @focus="setMaxWidth"
                  @visible-change="setTagTitle($event)"
                  @change="xMinerTableDataChange(scope.row)"
                >
                  <el-option
                    v-for="item in mappingOptions"
                    :key="item.id"
                    class="panel-data-select-option"
                    :label="item.option_label"
                    :value="item.option_value"
                    :style="selectStyle"
                  >
                    <div class="vs_ellipsis" :title="`${item.option_label} (${item.option_value})`">{{
                      item.option_label
                    }}</div>
                  </el-option>
                </el-select>
              </VsFormItem>
            </template>
          </el-table-column>
          <!-- 别名 -->
          <el-table-column
            v-if="aliasNameShow"
            prop="aliasName"
            :label="$demoi18n('panel.th.aliasName')"
            min-width="70"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <VsFormItem
                :prop="`tableData[${scope.$index}].aliasName`"
                :rules="
                  generateExceptionRules({
                    required: false,
                    label: $demoi18n(scope.row.explain),
                  })
                "
              >
                <el-input
                  v-model="scope.row.aliasName"
                  size="default"
                  :placeholder="$demoi18n('panel.label.aliasNoRepeat')"
                ></el-input>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            v-if="unitColumnShow"
            prop="unit"
            :label="$demoi18n('word.unit')"
            width="110"
            :render-header="renderTableHeader"
            :show-overflow-tooltip="true"
            :show-tooltip-when-overflow="true"
          >
            <template #default="scope">
              <VsFormItem
                :prop="`tableData[${scope.$index}].unit`"
                :rules="
                  generateRules({
                    required: false,
                  })
                "
              >
                <el-input v-model="scope.row.unit" size="small"></el-input>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            prop="explain"
            :label="$demoi18n('panel.th.explain')"
            min-width="36"
            :render-header="renderTableHeader"
            :show-overflow-tooltip="true"
            :show-tooltip-when-overflow="true"
          >
            <template #default="scope">
              <span>{{ $demoi18n(scope.row.explain) }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            v-if="operationShow"
            :label="$demoi18n('panel.th.operation')"
            min-width="110"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <div
                class="eye"
                :style="{ color: '#409EFF', marginLeft: '1px', cursor: 'pointer' }"
                @click.stop="handleVisible(scope.row, scope.$index)"
              >
                <i
                  v-if="scope.row.visible"
                  class="vs_icon_dev vs_icon_dev_eye"
                ></i>
                <i
                  v-else
                  class="vs_icon_dev vs_icon_dev_eye-off"
                ></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </slot>

      <slot v-bind="{ commonComp }" name="dataMapping_horizontalData"></slot>

      <slot name="dataSample">
        <!-- 数据展示区 -->
        <div class="container">
          <pre class="preview pre">{{ newResult }}</pre>
        </div>
      </slot>

      <!-- 自定义计算弹出窗 -->
      <CustomCalculation
        ref="myCustomCalculation"
        :widget-instance-id="widgetInstanceId"
        :index="customCalculationIndex"
        :code="customCalculationCode"
        :type="customCalculationType"
        :title="customCalculationTitle"
        :calc-list="mappingOptionsXTag"
        :table-name="form.dataTable"
        :field-arr="mappingOptions"
      />

      <!-- xtag 宽表 -->
      <FlatWideTable
        ref="myFlatWideTable"
        :package-code="form.dataPackage"
        :widget-instance-id="widgetInstanceId"
        :table-name="form.dataTable"
        :field-list="mappingOptions"
      />
    </div>
  </div>
</template>
<script lang="jsx">
import AutoRefreshSetting from '@/components/common/auto-refresh/auto-refresh-setting.vue';
import { isRealTime } from '@/components/common/auto-refresh/auto-refresh-util.js';
import Helptip from '@/components/common/helptip/helptip.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import CustomCalculation from '@/components/custom-calculation/index';
import FlatWideTable from '@/components/flat-wide-table-dialog/index';
import SortKeysCard from '@/components/panel-data/components/sort-keys-card.vue';
import UpdateKeysCard from '@/components/panel-data/components/update-keys-card.vue';
import FabricApiList from '@/components/panel-data/fabric-api-list';
import XMinerApiList from '@/components/panel-data/xMiner-api-list';
import RealTimeParamCard from '@/components/real-time-param-card/real-time-param-card.vue';
import EventBus from '@/event-bus/EventBus.js';
import { NOT_SUPPORTED_REDIS_LIST } from '@/utils/constant.js';
import { nextTick } from 'vue';
import xTagBase from './xtag-base';

/**
 * config  整体配置项
 * dataForm   初始表单的字段
 */
const xMiner = 'xMiner';
const xTag = 'xTag';
export default {
  name: 'PanelData',
  components: {
    CustomCalculation,
    FlatWideTable,
    XMinerApiList,
    PanelLabelOverflowTooltip,
    Helptip,
    AutoRefreshSetting,
    RealTimeParamCard,
    FabricApiList,
    UpdateKeysCard,
    SortKeysCard,
    ValueInputer,
  },
  mixins: [xTagBase],
  props: [
    'config',
    'widgetInstanceId',
    'dataForm',
    'dataSourceTypeOptions',
    'showSwitchDataMapping',
    'tableData_longitudinalData',
    'tableData_horizontalData',
    'unitColumnShow',
    'curComp',
    'showNegativeMapping',
    'isAurora',
    'rankTextTip',
    'labelTextTip',
    'isShowSaveHitorySwitch',
    'isShowUpdateKeys',
    'isShowSortKeys',
    'aliasNameShow',
    'operationShow',
  ],
  emits: ['vs_reset_count_y'],
  data() {
    return {
      xMiner,
      xTag,
      xvueTheme: window._adoPremise.uc.theme,
      result: '',
      propertyData: this.property,
      form: this.dataForm,
      xTagTextWidth: 100,
      getApiDataTimer: null,
      hideDataMapping: false,
      hideMarkLine: false,
      dataSourceManageUrl: '/dcp/config/#/home/data_source_manage',
      apiUrl: '/dcp/config/#/home/API_icon',
      jumpFrom: 'visual_component',
      viewDataSource: 'view_data_source',
      addDataSource: 'add_data_source',
      viewApi: 'view_api',
      addApi: 'add_api',
      dataModelUrl: '/dcp/config/#/home/data_model',
      xMinerPublicDatabase: 'xMinerPublicDatabase',
    };
  },
  computed: {

    // push模式实时数据
    isRealTime() {
      return isRealTime(this.form) && this.form.dataSourceType !== 'xMinerRedisRealTime';
    },
    isXMiner() {
      return ['xMiner', 'xMinerRedisRealTime', 'kafka', 'Dac'].includes(this.form.dataSourceType);
    },
    activeColorSwitch() {
      switch (this.xvueTheme) {
        case 'dark':
          return '#0EB4C2';
        default:
          return '#00AAFF';
      }
    },
    inactiveColorSwitch() {
      switch (this.xvueTheme) {
        case 'dark':
          return '#064559';
        default:
          return '#C0CCDA';
      }
    },
    commonComp() {
      return this;
    },
    isUniaxialBar() {
      return this.config.propertyPannelName === `config_${process.env.xvueNameSpace_}uniaxial_bar`;
    },
    newResult() {
      if (this.result) {
        return JSON.parse(this.result).map( item => {
          const fields = this.form.tableData.map( i => i.field);
          Object.keys(item).forEach( key => {
            if (!fields.includes(key)) {
              delete item[key];
            }
          });
          return item;
        });
      } else {
        return '';
      }
    },
    fItemConf() {
      const fItemConf = {
        dataVal: {
          label: this.$demoi18n('panel.tab.data'),
          type: 'text',
          required: true,
          specilChar: true,
        },
      };
      return fItemConf;
    },
    dataSourceTypeShowOptions() {
      return this.dataSourceTypeOptions.filter(item=>{
        if (NOT_SUPPORTED_REDIS_LIST.includes(this.config?.propertyPannelName || '')) {
          return item.value !== 'xMinerRedisRealTime';
        } else {
          return true;
        }
      });
    },
  },
  watch: {
    'form.tableData'() {
      this.getApiData();
    },
  },
  created() {
    this.form = this.dataForm;
    if (!this.form.dataVal) { // 低代码数据值
      this.form.dataVal = '';
    }
    if (this.config) {
      this.initMarkLine();
      this.loadData(this.form);
    }
  },
  methods: {

    /**
     * @param {string} queryType: 公共数据源传common；租户传tenant: 1. 新增数据源不需要传; 2. 查看api/新增api根据数据源传common或tenant
     * @param {string} jumpFrom: 不限制值但必传;
     */
    go2xMiner(type) {
      const baseUrl = window.isLocalEnv ? window.visualBaseUrl : window._adoPromiseBaseUrl;
      const {
        viewDataSource,
        viewApi,
        addDataSource,
        addApi,
        jumpFrom,
        dataSourceManageUrl,
        apiUrl,
        form: { dataSource, apiCode } = {},
      } = this;
      let url;
      const _dataSource = encodeURIComponent(dataSource);
      const _apiCode = encodeURIComponent(apiCode);
      switch (type) {
        case viewDataSource:
          url = `${baseUrl}${dataSourceManageUrl}?jumpFrom=${jumpFrom}&datasourceCode=${_dataSource}&queryType=common`;
          break;
        case addDataSource:
          url = `${baseUrl}${dataSourceManageUrl}?jumpFrom=${jumpFrom}`;
          break;
        case viewApi:
          url = `${baseUrl}${apiUrl}?jumpFrom=${jumpFrom}&datasourceCode=${_dataSource}` +
                `&queryType=common&apiCode=${_apiCode}`;
          break;
        case addApi:
          url = `${baseUrl}${apiUrl}?jumpFrom=${jumpFrom}&datasourceCode=${_dataSource}&queryType=tenant`;
          break;
        default:
          break;
      }
      if (url) {
        window.open(url, null, 'noopener=yes,noreferrer=yes');
      }
    },
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    dataMappingTypeChanged(value) {
      // 隐藏默认的纵向数据
      if (value === 'horizontalData') {
        this.hideDataMapping = true;
        this.hideMarkLine = false;
        EventBus.$emit('vs_reset_count_y');
      } else {
        this.hideDataMapping = false;
        this.hideMarkLine = true;
      }
      this.initDataMapping(value);
    },
    initDataMapping(type) {
      this.form.tableData = JSON.parse(JSON.stringify(this[`tableData_${type}`]));
      nextTick(() => {
        this.clearValidate();
      });
    },
    initMarkLine() {
      if (this.form.dataMappingType === 'horizontalData') {
        this.hideDataMapping = true;
        this.hideMarkLine = false;
        const { tableData } = this.config.config.data;
        for (let index = 0; index < tableData.length; index++) {
          const item = tableData[index];
          if (item.field === 's') {
            tableData.splice(index, 1);
          }
        }
      } else {
        this.hideDataMapping = false;
        this.hideMarkLine = true;
      }
    },
    renderTableHeader({ column }) {
      return (
        <el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
          <span>{column.label}</span>
        </el-tooltip>
      );
    },
    handleVisible(row, index) {
      this.form.tableData[index].visible = !row.visible;
    },
  },
};
</script>
<style lang="less" scoped>
:deep(.mapping-table) {
  .cell {
    padding: 0 3px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .el-form-item {
      &:hover {
        background-color: transparent !important;
      }
    }
  }
}

:deep(.xtag-dataTable-select) {
  width: 125px;
  padding-right: 8px;
}
:deep(.el-form-item__label) {
  min-width: 85px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.input-number {
  width: 80px;
  :deep(.el-input-number__decrease) {
    width: 19px;
  }
  :deep(.el-input-number__increase) {
    width: 19px;
  }
  :deep(.el-input__inner) {
    padding-left: 19px;
    padding-right: 19px;
  }
}
.input-number-left {
  margin-right: 25px;
}

.color-radio-group {
  background-color: #eeeeee;
  :deep(.el-radio-button__inner) {
    display: inline-block;
    padding: 2px 2px;
    border: 0;
    border-radius: 0;
    height: 24px;
    margin: 2px 2px;
    background: #eeeeee;
  }
  :deep(.is-active) {
    .el-radio-button__inner {
      background-color: #409eff;
    }
  }
}

.container {
  .preview {
    background-color: #f7f7f7;
  }
}

.switchDataMapping {
  padding-left: 10px;
}

.markLine {
  .switch {
    padding-top: 15px;
    padding-bottom: 15px;
    .text {
      font-size: 14px;
      padding-right: 10px;
      height: 28px;
      line-height: 28px;
    }
    .value {
      display: inline-block;
      width: 150px;
      margin-left: 10px;
    }
  }
}
.sourceTip {
  text-align: right;
  color: #409eff;
  span {
    text-align: right;
    cursor: pointer;
  }
  &.dark {
    color: #2af0fd;
  }
}

.xVueApiData {
  margin: 10px 0 10px 5px;
}
</style>

<style lang="less">
.mapping-table .mapping-scope {
  color: #f56c6c;
  margin-right: 4px;
  position: absolute;
  left: -5px;
  top: 25%;
}
.panel-data-select-dark {
  .el-input {
    .el-input__inner {
      border-color: #588ba8;
      color: #fff;
      background-color: #091a2d;
    }
    .el-input__icon {
      color: #588ba8;
    }
  }
}

.select-poper-dark {
  background-color: #091a2d;
  border-color: #588ba8;

  :deep(.el-scrollbar) {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #fff;
        background-color: #091a2d;

        .select-icon {
          margin-left: 0;
          padding: 0;
        }

        .select-option-slot-text {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #178ddf;
        }
        .select-option-slot-icon {
          display: inline-block;
          vertical-align: top;
        }
      }
      .hover {
        background-color: #102e4f;
      }
    }
  }
  :deep(.popper__arrow) {
    border-bottom-color: #588ba8;
    &::after {
      border-bottom-color: #091a2d !important;
    }
  }
}

.select-poper-light {
  .el-scrollbar {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        .select-icon {
          margin-left: 0;
          padding: 0;
        }

        .select-option-slot-text {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .select-option-slot-icon {
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }
}
</style>
